<template>
  <div>
    <el-form ref="form" inline :model="form" label-width="120px">
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="姓名:" prop="userName">
            <el-input
              v-model="form.userName"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员编号:" prop="uid">
            <el-input
              v-model="form.uid"
              placeholder="请输入人员编号"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资格号码:" prop="id">
            <el-input v-model="form.id" placeholder="请输入资格号码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="专兼职:" prop="isFullTime">
            <el-select style="width: 100%" v-model="form.isFullTime">
              <el-option label="专职" value="1"></el-option>
              <el-option label="兼职" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="年龄:" prop="userName">
            <el-select style="width: 100%" v-model="form.isFullTime">
              <el-option label="专职" value="1"></el-option>
              <el-option label="兼职" value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="组长与否:" prop="id">
            <el-select style="width: 100%" v-model="form.isFullTime">
              <el-option label="否" value="1"></el-option>
              <el-option label="组长" value="2"></el-option>
              <el-option label="见习组长" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="资格" prop="id">
            <el-select style="width: 100%" v-model="form.isFullTime">
              <el-option label="审核员" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="人员分层" prop="isFullTime">
            <el-select style="width: 100%" v-model="form.isFullTime">
              <el-option label="A" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="6">
          <el-form-item label="暂停：" prop="userName">
            <el-radio v-model="radio" label="true">是</el-radio>
            <el-radio v-model="radio" label="false">否</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="结束时间:" prop="id">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="getContractList"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="small"
              @click="handleReset"
              >清空</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div>
      <div class="annual-title">年度确认时间内审核次数: 95</div>
      <el-table border :data="tableData" style="width: 97%" max-height="400">
        <el-table-column prop="id" label="代码查询" align="center" />
        <el-table-column prop="userName" label="姓名" align="center" />
        <el-table-column prop="id" label="年龄" align="center" />
        <el-table-column prop="isFollowed" label="编号" align="center" />
        <el-table-column prop="isFullTime" label="专兼职" align="center" />
        <el-table-column prop="sex" label="体系" align="center" />
        <el-table-column prop="phone" label="标准" align="center" />
        <el-table-column prop="personnelNature" label="资格" align="center" />
        <el-table-column prop="isOffice" label="资格证编号" align="center" />
        <el-table-column prop="cooperationUnit" label="暂停" align="center" />
        <el-table-column
          prop="branchPersonnel"
          label="组长与否"
          align="center"
        />
        <el-table-column
          prop="branchPersonnel"
          label="开始时间"
          align="center"
        />
        <el-table-column
          prop="branchPersonnel"
          label="结束时间"
          align="center"
        />
        <el-table-column
          prop="branchPersonnel"
          label="人员分层"
          align="center"
        />
        <el-table-column prop="branchPersonnel" label="电话" align="center" />
        <el-table-column prop="branchPersonnel" label="描述" align="center" />
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="pageInfo.pageSize"
        :total="pageInfo.total"
        @current-change="handleChangeCurrent"
      />
    </div>
    <el-dialog title="提示" :visible.sync="visible" width="30%">
      <span>确认删除单号为{{ currentInfo.did }}的合同吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="visible = false">确 定</el-button>
      </span>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="handleDelete"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getContract, delContract } from "../../api/contract";
import moment from "moment";
export default {
  name: "HrQualificationAnnual",
  data() {
    return {
      form: {
        userName: "",
        id: "",
        personnelNature: "",
        isFullTime: "",
        regionalAddress: "",
        phone: "",
        expire: "",
      },
      tableData: [
        {
          id: "1",
          isFollowed: "否",
          userName: "周星驰",
          sex: "男",
          phone: "13255668899",
          personnelNature: "劳务工",
          isOffice: "是",
          cooperationUnit: "测试合作机构",
          branchPersonnel: "天津分公司",
          regionalAddress: "北京市",
          isFullTime: "兼职",
          idNo: "4105111111111111",
          expire: "2020-08-11",
        },
      ],
      pageInfo: {
        current: 1,
        pageSize: 10,
      },
      visible: false,
      currentInfo: {},
    };
  },
  created() {
    // this.getContractList();
  },
  methods: {
    async getContractList() {
      const { current, pageSize } = this.pageInfo;
      const res = await getContract({ ...this.form, current, pageSize });
      const { data, pageInfo } = res?.data;
      this.tableData = data?.map((x) => {
        return {
          ...x,
          time: moment(x.time).format("YYYY-MM-DD HH:mm"),
        };
      });
      this.pageInfo = pageInfo;
    },
    handleChangeCurrent(index) {
      this.pageInfo.current = index;
      this.getContractList();
    },
    handleReset() {
      this.$refs["form"].resetFields();
      this.getContractList();
    },
    handleDeletePre(info) {
      this.visible = true;
      this.currentInfo = info;
    },
    async handleDelete() {
      if (!this.currentInfo.id) {
        this.$message({
          type: "warning",
          message: "无效操作",
        });
      }
      const res = await delContract({ id: this.currentInfo.id });
      if (res?.data?.code === 0) {
        this.visible = false;
        this.$message({
          type: "success",
          message: "删除成功",
        });
        this.getContractList();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.input-content {
  display: flex;
  align-items: center;
}
.annual-title {
  margin-bottom: 10px;
}
</style>
